
<template>
  <div id="card_write_off_input">
		<magic-header v-if="!isWxPublic" titleName="扫码核销"></magic-header>
    <section>
      <div class="coupon">
          <div class="img_wrapper">
              <img :src="logo" alt="">
              <span v-show="showLogo" class="logo_text">{{type}}</span>
          </div>
          <div class="coupon_detail">
              <p class="name">{{name}}<span>{{state}}</span></p>
              <p class="shop_name">{{shopName}}</p>
              <p class="end_date">有效期:至{{endDate}}</p>
          </div>
      </div>
      <div class="apply">
        <input @click="submit" type="button" value="确认核销">
      </div>
    </section>
  </div>
</template>
<script>
import magicHeader from "components/magicHeader";
import cardWriteOff from "services/vfhz/card_write_off";
import ticket from "assets/mycard01.png";
export default {
  name:'card_write_off_input',
  data() {
    return {
      userId:'',
      shopId:'',
      logo:'',
      name:'',
      shopName:'',
      state:'',
      endDate:'',
      isWxPublic:false,
      ticket:ticket,
      showLogo:false
    };
  },
  created() {
     if (this.$.env === "wxPublic") {
        this.isWxPublic = true;
    }
    console.log(this.isWxPublic)
    this.userId = this.$.userId;
    this.shopId = this.$.shopId;
    this.logo = this.$route.params.img
    console.log(this.logo)
    //logo等于host时 没有优惠券图片显示默认
    if(this.logo === this.$.host){
        this.logo = ticket;
        this.showLogo = true;
    }
    console.log(this.$route.params.name)
    this.name = this.$route.params.name
    this.shopName = this.$route.params.shopName
    this.state = this.$route.params.state
    this.endDate = this.$route.params.endDate
    this.couponCodeId = this.$route.params.code
    this.type  = this.$route.params.type
  },
  methods: {
      submit(){
          cardWriteOff.bind(this)({
            methodName : "VerificationCoupon", 
            shopId:this.shopId,
            userId:this.userId,
            couponCodeId : this.couponCodeId
          },res => {
              console.log(res)
              if(res.success === true){
                  this.$router.push({
                      name:'card_write_off_success'
                  })
              }
          },err =>{
              console.log(err)
          })
    }
  },
  components: {
    magicHeader
  }
};
</script>
<style scoped="scoped" lang="scss">
  #card_write_off_input{
      text-align:center;
      font-size: 14px;
      .coupon{
        display: flex;
        width: 100vw;
        height: 120px;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
        .img_wrapper{
            flex : 0 0 120px;
            height: 120px;
            padding: 10px;
            img{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .logo_text{
                position: absolute;
                left: 38px;
                top: 50px;
                font-size: 16px;
                color: #fff;
            }
        }
        .coupon_detail{
            flex: 1;
            font-size: 14px;
            text-align: left;
            padding-left: 5px;
            .name{
                font-size: 16px;
                margin-top: 10px;
                span{
                    float: right;
                    margin-right: 10px;
                    color: #80A3cc;
                }
            }
            .shop_name{
                margin-top: 25px;
            }
            .end_date{
                margin-top: 25px;
            }
        }
      }
      .apply{
          margin-top: 35px;
        input{
            width: 80vw;
            height: 46px;
            line-height: 46px;
            border-radius: 5px;
            border: none;
            font-size: 14px;
            background-color: #FB8713;
            color: #fff;
            font-size: 14px;
        }
      }
  }
</style>